<template>
    <div class="nav-bar-wrap">
        <div class="nav-bar">
            <!-- 返回按钮 -->
          
            <div style="flex: 1;height: 100%;">
                <slot name="custom"></slot>
            </div>
            <!-- 自定义按钮 -->
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        onBack: {
            type: [Function, undefined],
            default: undefined
        }
    },
    data() {
        return {}
    },
    methods: {
     
    }
}
</script>

<style lang="scss" scoped>
.nav-bar-wrap {
    background: linear-gradient( 90deg, #51C3FF 0%, #00A5FC 100%);
    display: flex;
    align-items: center;
    padding-top: 40px;

    .nav-bar {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;

      

        .title {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
        }
    }
}
</style>